<template>
  <div>
    <div class="flex items-center gap-4">
      <img :src="rightIcon" class="w-6 h-5" />
      管道泄漏设置
    </div>
    <div
      class="mt-4 w-[440px] h-[230px] bg-white rounded-lg shadow flex flex-col items-center gap-8 py-8 box-border"
    >
      <div class="flex items-center justify-center gap-4">
        <span class="">泄漏点距管道起点里程 </span>
        <el-input v-model="leakPosition" class="!w-[160px]" />
        <span>km</span>
      </div>
      <div class="flex items-center justify-center gap-4">
        <span class="ml-24">泄漏时间</span>
        <el-input v-model="leakTime" class="!w-[160px]" />
        <span>h</span>
      </div>
      <div class="flex items-center justify-center gap-4">
        <span class="ml-[120px]">泄漏流量</span>
        <el-input v-model="leakFlow" class="!w-[160px]" />
        <span>m³/h</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import rightIcon from '@/assets/images/rightIcon.png'
// 响应式数据
const leakPosition = ref('10')
const leakTime = ref('2')
const leakFlow = ref('10')

const validateSettings = () => {
  if (!leakPosition.value) {
    ElMessage.error('泄漏位置不能为空')
    return false
  }
  if (!leakTime.value) {
    ElMessage.error('泄漏时间不能为空')
    return false
  }
  if (!leakFlow.value) {
    ElMessage.error('泄漏流量不能为空')
    return false
  }

  return true
}

const isFormValid = computed(() => {
  if (!leakPosition.value || !leakTime.value || !leakFlow.value) return false
  return true
})

const getParamsData = () => {
  return {
    start_t: leakTime.value,
    XL_LOC: leakPosition.value,
    XL_Q: leakFlow.value
  }
}

// 暴露给父组件的方法和数据
defineExpose({
  validateSettings,
  isFormValid,
  getParamsData
})
</script>

<style scoped></style>
